<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24" class="vab-anchor">
        <div class="floor0">用户管理</div>
        <div class="floor1">配置管理</div>
        <div class="floor2">角色管理</div>
        <div class="floor3">定时任务补偿</div>
        <el-card shadow="never"
                 :body-style="{position:'fixed',top:'170px',right:'68px',background:'white',padding:'10px'}"
        >
          <el-tabs tab-position="right" style="height: 160px;" :value="steps.active">
            <el-tab-pane label="用户管理" :lazy="true" name="用户管理">
            </el-tab-pane>
            <el-tab-pane label="配置管理" :lazy="true" name="配置管理">
            </el-tab-pane>
            <el-tab-pane label="角色管理" :lazy="true" name="角色管理">
            </el-tab-pane>
            <el-tab-pane label="定时任务补偿" :lazy="true" name="定时任务补偿">
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'dynamicAnchor',
  data(){
      return {
        steps:{
          active:'用户管理'
        }
  }
  },
  methods: {
    onScroll() {
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      if (scrolled >= 2101) {
        this.steps.active = '定时任务补偿'
      } else if (scrolled < 1401 && scrolled >= 700) {
        this.steps.active = '配置管理'
      } else if (scrolled < 2101 && scrolled >= 1401){
        this.steps.active = '角色管理'
      }else {
        this.steps.active = '用户管理'
      }
    }
  },
  mounted() {
    this.onScroll()
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 50px;

  [class*=floor] {
    height: 780px;
    padding: 20px;
  }

  ::v-deep.el-tabs__content {
    height: 780px;
  }

  [class*=floor]:nth-child(2n) {
    background: #6db9ff;
  }

  [class*=floor]:nth-child(odd) {
    background: #b5ff8a;
  }

  .vab-anchor {

  }
}
</style>
